<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>热门榜单</title>

    <link
      rel="stylesheet"
      href="../../static/css/unlogin-list.css"
      type="text/css"
      th:href="@{/static/css/unlogin-list.css}"
    />
    <link th:href="@{/static/css/unlogin.css}">

    <link
      rel="stylesheet"
      href="../../static/css/iconfont01.css"
      th:href="@{/static/css/iconfont01.css}"
    />
    <link
            rel="stylesheet"
            href="../../static/customAlertConfirm/customAlertConfirm.css"
            th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
    />
    <link
            rel="stylesheet"
            href="../../static/customAlertConfirm/customAlertConfirm.css"
            th:href="@{/static/css/more.css}"
    />
  </head>

  <body>
    <div class="mask">
      <div class="window">
        <div class="reply-top">
          <div class="top-text">回复</div>
          <div class="top-cancel">
            <i class="iconfont">&#xe652;</i>
          </div>
        </div>
        <div class="reply-container">
          <textarea
            name="reply"
            placeholder="请发布你的回复"
            class="reply-text"
          ></textarea>
          <p class="ddl">还可输入100字</p>
          <button class="reply-btn disable">回复</button>
        </div>
      </div>
    </div>
    <div class="top">
      <div id="top">
        <!-- logo -->
        <div id="logo-search">
          <div class="logo">
            <img
              src="../../static/img/logo.png"
              th:src="@{/static/img/logo.png}"
              alt=""
            />
          </div>
          <div class="top-search" th:replace="~{home::topSearch}">
            <span><i class="iconfont">&#xe623;</i></span>
            <input type="text" placeholder="请输入搜索内容" id="top-input" />
            <div class="search-list">
              <div>
                <span><i class="iconfont">&#xe65a;</i> 1111</span>
              </div>
              <div>
                <span><i class="iconfont">&#xe65a;</i> 1111</span>
              </div>
              <div>
                <span><i class="iconfont">&#xe65a;</i> 1111</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 各种功能 -->
        <div id="fn">
          <div class="home fn">
            <div class="icon"><i class="iconfont">&#xe625;</i></div>
          </div>
          <div class="hot border fn">
            <div class="icon"><i class="iconfont">&#xe628;</i></div>
          </div>
          <div class="message fn">
            <div class="icon"><i class="iconfont">&#xe908;</i></div>
          </div>
          <div class="private fn">
            <div class="icon"><i class="iconfont">&#xe60a;</i></div>
          </div>
        </div>
        <!-- 登录，设置等-->
        <div class="access">
          <div id="top-login">
            <a id="login-register-btn" th:href="@{/userLogin}">登录/注册</a>
          </div>

          <div id="setting">
            <button id="top-setting-btn">
              <i class="iconfont">&#xe6d9; </i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="list">
        <p>热门</p>
        <ul>
          <a th:href="@{/blog/getIndexBlog(state=1)}">
            <span><i class="iconfont">&#xe6ac;</i></span
            >热门微博
          </a>
          <a  th:href="@{/blog/getHotBlogForUnLogin}">
            <span><i class="iconfont">&#xe631;</i></span>
            热搜榜
          </a>
          <a class="color"  th:href="@{/blog/getTheLatestHotBlogForUnLogin}">
            <span><i class="iconfont">&#xe660;</i></span>
            热门榜单
          </a>
        </ul>
      </div>
      <div id="news" >

        <div class="news" th:each="article:${list}"  th:bid="${article.id}">
          <div class="news-top">
            <a href="javascript" class="head-link">
              <div class="head">
                <img
                        src="../../static/img/banner.jpg"
                        th:src="@{${article.userAvatarUrl}}"
                        alt=""
                />
              </div>
            </a>
            <div class="top-details">
              <a href="" class="name">
                <p th:text="${article.username}">XXX</p>
              </a>
              <p class="time" th:text="${article.time}">3-18</p>
            </div>
            <div class="top-attention">
              <button class="top-attention-btn">
                <i class="iconfont">&#xe7df;</i>关注
              </button>
            </div>
          </div>
          <div class="news-container">
            <div th:text="${article.text}" class="container">
              <span class="container-text"
              >111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111111111111111111111111111111111</span
              >

              <span class="collapse more">...展开</span>
            </div>

            <div class="news-img"></div>
          </div>
          <!-- 底部博文功能 -->
          <div class="foot">
            <div class="share">
              <i class="iconfont">&#xe62f;</i>
              <span
                      th:text="${article.transmit}&gt;0?${article.transmit}:'分享'"
              >12</span
              >
            </div>
            <div class="assess" th:bid="${article.id}">
              <i class="iconfont">&#xe695;</i>
              <span th:text="${article.comment}&gt;0?${article.comment}:'评论'"
              >12</span
              >
            </div>
            <div class="like">
              <i class="iconfont">&#xe62b;</i>
              <span th:text="${article.likes}&gt;0?${article.likes}:'点赞'"
              >12</span
              >
            </div>
          </div>
          <!-- 点击评论展开评论信息 -->
          <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
            <span class="comment-ddl">还可输入140字</span>
            <button class="comment-btn disable">评论</button>
            <!-- 评论 -->
            <div class="comment">
              <!-- 一级评论 -->
              <div class="item1">
                <div class="comment-list">
                  <a href="">
                    <div class="comment-head">
                      <img
                              src="../../static/img/banner.jpg"
                              th:src="@{/static/img/banner.jpg}"
                              alt=""
                      />
                    </div>
                  </a>
                  <div class="comment-details">
                    <a href="" class="comment-name"> <span>XXX</span> </a>:
                    <span class="c-content">今天天气真好1</span>
                    <div class="comment-bottom">
                      <div class="c-time">3-18</div>
                      <div class="comment-fn">
                        <div class="c-complain">
                          <i class="iconfont">&#xe6a9;</i>
                        </div>
                        <div class="reply">
                          <i class="iconfont">&#xe695;</i>
                        </div>
                        <div class="c-like">
                          <i class="iconfont">&#xe600;</i>
                          12
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 二级评论 -->
                <div class="list2">
                  <div class="list2-bar"></div>
                  <div class="list2-details">
                    <a href="" class="list2-name"><span>XXX:</span></a>
                    <span class="list2-content">1111111111</span>
                  </div>
                  <div class="list2-bottom">
                    <div class="list2-time">3-18</div>
                  </div>
                </div>

                <div class="list2">
                  <a class="more-reply"
                  >共2条回复
                    <i class="iconfont">&#xe62e;</i>
                  </a>
                </div>
              </div>
              <!-- 二级评论 -->
            </div>
            <div class="blog-skip" >
              <a th:href="@{/blog/skipInEnvelope(id=${article.id})}">查看全部评论 ></a>
            </div>
          </div>
        </div>
      </div>
      <div id="right-bar">
        <div id="hot">
          <div class="hot-top">
            <div class="hot-top-content"><p>热搜</p></div>
            <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
          </div>
          <div class="hot-list" th:each="hot,list:${hotLabelList}">
            <span class="rank1" th:class="|rank${list.count}|" th:text="${list.count}">1</span><a th:text="${hot}">222222222222</a>
          </div>

          <a th:href="@{/blog/getHotBlogForUnLogin}" class="all-hot"><div>查看完整榜单</div></a>
        </div>
        <a class="return-top" href="#">
          <i class="iconfont">&#xea7d;</i>
        </a>
      </div>
    </div>
  </body>
  <script
          type="text/javascript"
          src="../../static/js/jquery3.7.1.min.js"
          th:src="@{/static/js/jquery3.7.1.min.js}"
  ></script>
  <script th:src="@{/static/customAlertConfirm/customAlertConfirm.js}" src="../../static/customAlertConfirm/customAlertConfirm.js"></script>
  <script th:src="@{/static/js/unlogin-list.js}"></script>
  <script
    src="../../static/js/message.js"
    th:src="@{/static/js/message.js}"
  ></script>
  <script src="" th:src="@{/static/js/more.js}"></script>
</html>
